<template>
	<view class="usercont">
		<view class="user-bg">
			<view class="user-info" @click="toInfo">
				<image src="../../static/avatar.png" mode=""></image>
				<view class="info">
					<p>Taurus</p>
					<p>13247272650</p>
				</view>
			</view>
			<view class="mall-detail">
				<view class="item" @click="toUrl(1)">
					<p>4000.00</p>
					<p>余额</p>
				</view>
				<view class="item" @click="toUrl(2)">
					<p>100000</p>
					<p>积分</p>
				</view>
				<view class="item" @click="toUrl(3)">
					<p>0</p>
					<p>优惠券</p>
				</view>
				<view class="item" @click="toUrl(4)">
					<p>133</p>
					<p>收藏</p>
				</view>
			</view>
			<view class="order">
				<view class="order-info" @click="toOrder(0)">
					<view class="info-link">
						<h2>订单中心</h2>
						<p>查看全部></p>
					</view>
				</view>
				<view class="order-menu">
					<view class="item" @click="toOrder(1)">
						<image src="../../static/order1.png" mode=""></image>
						<p>待付款</p>
					</view>
					<view class="item" @click="toOrder(2)">
						<image src="../../static/order2.png" mode=""></image>
						<p>待发货</p>
					</view>
					<view class="item" @click="toOrder(3)">
						<image src="../../static/order3.png" mode=""></image>
						<p>待收货</p>
					</view>
					<view class="item" @click="toOrder(4)">
						<image src="../../static/order4.png" mode=""></image>
						<p>待评价</p>
					</view>
					<view class="item" @click="toOrder(5)">
						<image src="../../static/order5.png" mode=""></image>
						<p>售后/退款</p>
					</view>
				</view>
			</view>
			<view class="swiper">
				<u-swiper
					:list="list1"
					@change="change"
					@click="click"
				></u-swiper>
			</view>
			<view class="fuwu">
				<view class="fuwu-info">
					<view class="info-link">
						<h2>我的服务</h2>
					</view>
				</view>
				<view class="fuwu-menu">
					<view class="item" @click="toAddress">
						<image src="../../static/dizhi.png" mode=""></image>
						<p>地址信息</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		methods: {
			toAddress(){
				uni.navigateTo({
					url:"/pages/user/user-address"
				})
			},
			toOrder(type){
				uni.navigateTo({
					url:`/pages/user/user-order?type=${type}`
				})
			},
			toUrl(type){
				if(type==1){
					uni.navigateTo({
						url:"/pages/user/user-balance"
					})
				}else if(type==2){
					uni.navigateTo({
						url:"/pages/user/user-integral"
					})
				}else if(type==3){
					uni.navigateTo({
						url:"/pages/user/user-coupon"
					})
				}else{
					uni.navigateTo({
						url:"/pages/user/user-collection"
					})
				}
			},
			toInfo(){
				uni.navigateTo({
					url:"/pages/user/user-info"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.usercont{
	height:calc(100vh - 50px);
	background-color:#f5f5f5;
	.user-bg{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 348px;
		background-image: url('../../static/user_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.swiper{
			width:95%;
			margin:0 auto;
		}
		.fuwu{
			width:95%;
			height:auto;
			background-color:#ffffff;
			margin:16px auto;
			border-radius:10px;
			.fuwu-info{
				padding:10px;
				.info-link{
					display:flex;
					align-items:center;
					justify-content:space-between;
					h2{
						font-size:18px;
					}
				}
			}
			.fuwu-menu{
				display:flex;
				padding:10px;
				align-items:center;
				justify-content:space-between;
				.item{
					display:flex;
					width:30%;
					flex-wrap: wrap;
					align-items:center;
					flex-direction:column;
					image{
						width:60rpx;
						height:60rpx;
					}
					p{
						font-size:12px;
						margin-top:10px;
					}
				}
			}
		}
		.order{
			width:95%;
			height:auto;
			background-color:#ffffff;
			margin:16px auto;
			border-radius:10px;
			.order-info{
				padding:10px;
				.info-link{
					display:flex;
					align-items:center;
					justify-content:space-between;
					h2{
						font-size:18px;
					}
				}
			}
			.order-menu{
				display:flex;
				padding:15px;
				align-items:center;
				justify-content:space-between;
				.item{
					display:flex;
					align-items:center;
					flex-direction:column;
					justify-content:center;
					image{
						width:60rpx;
						height:60rpx;
					}
					p{
						font-size:12px;
						margin-top:10px;
					}
				}
			}
		}
		.mall-detail{
			display:flex;
			justify-content:space-between;
			align-items:center;
			.item{
				display:flex;
				flex-direction:column;
				align-items:center;
				margin:0 10px;
				justify-content:center;
				p:nth-child(1){
					font-size:18px;
					color:#ffffff;
					font-weight:bold;
				}
				p:nth-child(2){
					color:#f0f0f0;
					margin-top:5px;
					font-size:14px;
				}
			}
		}
		.user-info{
			display:flex;
			align-items:center;
			padding:20px 15px;
			image{
				width:140rpx;
				height:140rpx;
			}
			.info{
				line-height:30px;
				margin-left:14px;
				p{
					color:#ffffff;
				}
				p:nth-child(1){
					font-size:20px;
					font-weight:bold;
				}
				p:nth-child(2){
					margin-top:5px;
				}
			}
		}
	}
}
</style>
